<div class="content-section documentation">
    <h1>Get Started</h1>
    <p>PrimeNG is a rich set of open source native Angular UI components.</p>

    <h5>Video Tutorial</h5>
    <p>Watch the video tutorial that goes through the steps documented on this guide.</p>
    <div class="video-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/pkOx7bSBQsg" frameborder="0" allowfullscreen></iframe>
    </div>

    <h5>Download</h5>
    <p>PrimeNG is available at npm, if you have an existing application run the following command to download it to your project.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
npm install primeng --save
npm install primeicons --save
</app-code>

    <h5>Load Configuration</h5>
    <p>PrimeNG is distributed in commonjs format, a module manager of your choice is required and this guide provides samples for SystemJS, WebPack and Angular CLI.</p>

    <h5>Import</h5>
    <p>UI components are configured as modules, once PrimeNG is downloaded and configured, modules and apis can be imported from <i>primeng/&#123;module&#125;</i> shorthand in your application code. Documentation
        of each component states the import path.</p>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;AccordionModule&#125; from 'primeng/accordion';     //accordion and accordion tab
import &#123;MenuItem&#125; from 'primeng/api';                  //api
</app-code>

    <h5>Styles</h5>

    <p>The css dependencies are as follows, Prime Icons, theme of your choice and structural css of components.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
node_modules/primeicons/primeicons.css
node_modules/primeng/resources/themes/saga-blue/theme.css
node_modules/primeng/resources/primeng.min.css
</app-code>

    <h5>Free Themes</h5>
<p>PrimeNG ships with 33 free themes to choose from.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
primeng/resources/themes/bootstrap4-light-blue/theme.css
primeng/resources/themes/bootstrap4-light-purple/theme.css
primeng/resources/themes/bootstrap4-dark-blue/theme.css
primeng/resources/themes/bootstrap4-dark-purple/theme.css
primeng/resources/themes/md-light-indigo/theme.css
primeng/resources/themes/md-light-deeppurple/theme.css
primeng/resources/themes/md-dark-indigo/theme.css
primeng/resources/themes/md-dark-deeppurple/theme.css
primeng/resources/themes/mdc-light-indigo/theme.css
primeng/resources/themes/mdc-light-deeppurple/theme.css
primeng/resources/themes/mdc-dark-indigo/theme.css
primeng/resources/themes/mdc-dark-deeppurple/theme.css
primeng/resources/themes/fluent-light/theme.css
primeng/resources/themes/saga-blue/theme.css
primeng/resources/themes/saga-green/theme.css
primeng/resources/themes/saga-orange/theme.css
primeng/resources/themes/saga-purple/theme.css
primeng/resources/themes/vela-blue/theme.css
primeng/resources/themes/vela-green/theme.css
primeng/resources/themes/vela-orange/theme.css
primeng/resources/themes/vela-purple/theme.css
primeng/resources/themes/arya-blue/theme.css
primeng/resources/themes/arya-green/theme.css
primeng/resources/themes/arya-orange/theme.css
primeng/resources/themes/arya-purple/theme.css
primeng/resources/themes/nova/theme.css
primeng/resources/themes/nova-alt/theme.css
primeng/resources/themes/nova-accent/theme.css
primeng/resources/themes/luna-amber/theme.css
primeng/resources/themes/luna-blue/theme.css
primeng/resources/themes/luna-green/theme.css
primeng/resources/themes/luna-pink/theme.css
primeng/resources/themes/rhea/theme.css
</app-code>
    
    <h5>Dependencies</h5>
    <p>Majority of PrimeNG components (95%) are native and there are some exceptions having 3rd party dependencies. In addition, components require <a href="https://www.npmjs.com/package/primeicons">PrimeIcons</a> for icons.</p>

    <div class="doc-tablewrapper">
        <table class="doc-table">
            <thead>
                <tr>
                    <th>Component</th>
                    <th>Dependency</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Schedule</td>
                    <td>FullCalendar 4.1.0</td>
                </tr>
                <tr>
                    <td>Editor</td>
                    <td>Quill Editor</td>
                </tr>
                <tr>
                    <td>GMap</td>
                    <td>Google Maps</td>
                </tr>
                <tr>
                    <td>Charts</td>
                    <td>Charts.js 2.7.x</td>
                </tr>
                <tr>
                    <td>Captcha</td>
                    <td>Google Recaptcha</td>
                </tr>
            </tbody>
        </table>
    </div>

    <h5>Ripple</h5>
    <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled globally at your main component e.g. app.component.ts by injecting
        <i>PrimeNGConfig</i>.</p>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; PrimeNGConfig &#125; from 'primeng/api';

@Component(&#123;
    selector: 'app-root',
    templateUrl: './app.component.html'
&#125;)
export class AppComponent implements OnInit &#123;

    constructor(private primengConfig: PrimeNGConfig) &#123;&#125;

    ngOnInit() &#123;
        this.primengConfig.ripple = true;
    &#125;

&#125;
</app-code>

    <h5>Animations</h5>
    <p>Various components utilize angular animations to improve the user experience, starting with Angular 4 animations have their own module so you need
    to import <i>BrowserAnimationsModule</i> to your application. If you prefer to disable animations globally, import <i>NoopAnimationsModule</i> instead.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
npm install @angular/animations --save
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;BrowserModule&#125; from '@angular/platform-browser';
import &#123;BrowserAnimationsModule&#125; from '@angular/platform-browser/animations';

@NgModule(&#123;
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
&#125;)
export class YourAppModule &#123; &#125;
</app-code>

    <h5>Angular CLI Integration</h5>
    <p>Angular CLI is the official CLI tool for Angular. We strongly suggest using Angular CLI when starting an Angular project.</p>

    <h6>Dependencies</h6>
    <p>Add PrimeNG and PrimeIcons as dependencies.</p>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
"dependencies": &#123;
    //...
    "primeng": "^10.0.0",
    "primeicons": "^4.0.0"
&#125;,
</app-code>

    <h6>Styles Configuration</h6>
    <p>Configure required styles at the styles section, example below uses the Saga Blue theme.</p>
    
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
"styles": [
  "node_modules/primeng/resources/themes/saga-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeicons/primeicons.css",
  //...
],
</app-code>

    <p>That is all, you may now import PrimeNG components, for a working example visit the <a href="https://github.com/primefaces/primeng-quickstart-cli">PrimeNG CLI QuickStart</a> sample at GitHub.</p>

</div>
